<template>
  <li
    class="card-list"
    @click.stop="$router.push({ path: '/songlistdetails', query: { id: item.id } })"
  >
    <ImgCount :item="item"></ImgCount>
    <h5>{{ item.name }}</h5>
  </li>
</template>

<script>
import ImgCount from "@/components/ImgCount.vue";

export default {
  props: {
    item: Object,
  },
  components: {
    ImgCount,
  },
};
</script>

<style lang="less" scoped>
.card-list {
  flex-basis: 30%;
  margin-bottom: 16px;
  &:nth-child(3n + 2) {
    margin: 0 5px;
  }
  flex-grow: 1;
  h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    padding: 6px 2px 0 6px;
    min-height: 30px;
    line-height: 1.2;
  }
}
</style>